<template>
    <div class="pay-record">
        <scroll-view
            style="height: 100%;"
            scroll-y="true"
            @scrolltolower="handleScrolltolower">
            <div class="pay-record-item" v-for="item in dataList" :key="item.id">
                <img src="../../static/image/my-icon3.png" alt="">
                <div class="pay-record-right">
                   <div class="pay-value">
                       <div>
                           充值<span class="value">{{ item.amount}}</span>元
                       </div>
                       <div class="value2">+{{ item.amount }}</div>
                   </div>
                    <div class="pay-create-time">
                        {{ item.createdTime}}
                    </div>
                </div>
            </div>
            <div style="text-align: center;line-height: 18px;color: rgba(31, 34, 45, 0.54);font-size: 14px">
                {{ loadingText() }}
            </div>
        </scroll-view>
    </div>
</template>

<script>
import { payRequest } from "@/api";

export default {
    name: "record",
    data() {
        return {
            pageNo: 1,
            pageSize: 20,
            total: 0,
            dataList: [
            
            ]
        }
    },
    created() {
        this.getPageList()
    },
    methods: {
        getPageList() {
            payRequest.recordList({ pageNo: this.pageNo, pageSize: this.pageSize }).then(res => {
                res.data.data = res.data.data.map(el => {
                    return {
                        ...el,
                        amount: el.amount ? (el.amount / 100).toFixed(2) : 0
                    }
                })
                this.dataList = [...this.dataList, ...res.data.data]
                this.total = res.data.total
            })
        },
        //  滚动到底部触发加载更多数据
        handleScrolltolower() {
            let len = this.dataList.length
            if(len >= this.total) {
                return
            }
            this.pageNo += 1
            this.getPageList()
        },
        loadingText() {
            if (this.dataList.length < this.total) {
                return '加载中'
            } else {
                return  '没有更多数据了！'
            }
        }
    }
}
</script>

<style lang="less">
.pay-record {
    height: 100vh;
    padding: 16px;
    overflow: hidden;
    background-color: #FBFBFB;
    .pay-record-item {
        background-color: #FFFFFF;
        padding: 16px;
        border-radius: 8px;
        margin-bottom: 8px;
        display: flex;
        img {
            width: 24px;
            height: 24px;
            margin-right: 12px;
        }
        .pay-record-right {
            flex-grow: 1;
            .pay-value {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;
                color: #303030;
                margin-bottom: 16px;
                .value {
                    color: #5581FA;
                }
                .value2 {
                    font-weight: bold;
                    color: #000000;
                }
            }
            
            .pay-create-time {
                color: #999999;
                font-size: 14px;
            }
        }
    }
}
</style>